<template>
  <div class="square-content">
    <div class="filter-container">
      <el-input v-model="listQuery.user_id" placeholder="用户ID"></el-input>
      <el-select v-model="listQuery.admin_state" clearable>
        <el-option
          v-for="item in deleteStateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="listQuery.if_recommend"
        clearable
        placeholder="是否推荐"
        @change="handleRecommendChange"
      >
        <el-option value="true" label="已推荐"></el-option>
        <el-option value="false" label="未推荐"></el-option>
      </el-select>
      <el-select
        v-model="listQuery.trend_type"
        clearable
        placeholder="是否机器人"
      >
        <el-option :value="2" label="是"></el-option>
        <el-option :value="4" label="否"></el-option>
      </el-select>
      <el-select
        v-model="listQuery.topic_id"
        clearable
        filterable
        placeholder="话题"
      >
        <el-option
          v-for="item in topicOptions"
          :key="item.twitter_id"
          :label="item.name"
          :value="item.twitter_id"
        ></el-option>
      </el-select>

      <el-date-picker
        v-model="daterangeValue"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="daterangeChanged"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="daterangePickerOptions"
      ></el-date-picker>
      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="warning" @click="resetFilter">重置</el-button>
    </div>

    <div class="app-container calendar-list-container">
      <div>
        <el-checkbox
          v-model="checkedAll"
          style="margin-right: 10px"
          @change="handleAllCheck"
          >全选</el-checkbox
        >
        <el-button type="danger" @click="batchCheck">批量通过</el-button>
        <el-button type="danger" @click="batchRecommend">批量推荐</el-button>
        <el-button type="danger" @click="batchDelete">批量删除</el-button>
      </div>

      <ItemTrend
        ref="trendList"
        :list.sync="list"
        :loading="listLoading"
        @onCheckedChange="onCheckedChange"
      />
    </div>

    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    >
    </TablePagination>

    <!--封号-->
    <BanPlayerDialog
      :visible.sync="banPlayerDialogVisible"
      :forbiddenType="0"
      @handleClose="closeBanPlayerDiolog"
      @handleSuccess="getList"
      :uids="banPlayerId"
    ></BanPlayerDialog>
  </div>
</template>

<script>
import DATEPICKER_OPTIONS from "@/config/datepickerOptions";
import { parseTime } from "@/filters/index";
import BanPlayerDialog from "@/components/BanPlayerDialog";
import VPlayer from "@/components/VPlayer/index";
import TablePagination from "@/components/TablePagination";
import ItemTrend from "./components/ItemTrend";
export default {
  name: "square-content",
  components: {
    VPlayer,
    BanPlayerDialog,
    TablePagination,
    ItemTrend,
  },
  data() {
    var date = new Date();
    var month = date.getMonth();
    date.setDate(1);
    return {
      banPlayerDialogVisible: false,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        offset: 0,
        limit: 20,
        if_recommend: "",
        startTime: parseTime(date, "{y}-{m}-{d}") + " 00:00:00",
        endTime: parseTime(new Date(), "{y}-{m}-{d}") + " 23:59:59",
        admin_state: "0",
        orderBy: "update_time",
        orderType: "desc",
      },
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: [new Date(date), new Date()],
      topicOptions: [],
      checkedAll: false,
      banPlayerId: "",
      deleteStateOptions: [
        {
          label: "待处理",
          value: "0",
        },
        {
          label: "已通过",
          value: "1",
        },
        {
          label: "已删除",
          value: "2",
        },
        {
          label: "已忽略",
          value: "3",
        },
      ],
    };
  },
  created() {
    this.getList();
    this.getTopics();
  },

  methods: {
    handleRecommendChange(val) {
      if (val == "true") {
        this.listQuery.admin_state = "1";
      }
    },
    getList() {
      this.checkedAll = false;
      this.listLoading = true;
      this.listQuery.start_time = new Date(this.listQuery.start_time).getTime();
      this.listQuery.end_time = new Date(this.listQuery.end_time).getTime();
      this.$get("trend", this.listQuery).then((resp) => {
        resp.data.trend_list.forEach(item=>{
          item.checked=false;
          item.images = [];
          for (var i = 0; item.pics != undefined && i < item.pics.length; i++) {
          item.images.push(
            this.imgHost + item.pics[i],
          );
        }
        })
        this.list = resp.data.trend_list;
        this.total = resp.data.count;
        this.listLoading = false;
      });
    },

    handleAllCheck(value) {
      this.list.forEach((item, index, arr) => {
        if (value) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
    },
    onCheckedChange(checkedAll) {
      this.checkedAll = checkedAll;
    },

    getCheckedIds() {
      let checkedIds = [];
      this.list.forEach((item, index, arr) => {
        if (item.checked) {
          checkedIds.push(item);
        }
      });
      return checkedIds;
    },
    //批量恢复
    batchRecover() {
      this.handleBatchUpdate("3");
    },
    //批量删除
    batchDelete() {
      this.handleBatchUpdate("2");
    },
    //批量审核
    batchCheck() {
      this.handleBatchUpdate("1");
    },
    handleBatchUpdate(type) {
      if (this.validateChecked()) {
         let checkedIds = this.getCheckedIds();
        this.$refs.trendList.handleUpdateItem(checkedIds, type);
      }
    },
    batchRecommend() {
      if (this.validateChecked()) {
        let checkedIds = this.getCheckedIds();
        this.$refs.trendList.handleRecommendItem(checkedIds, false);
      }
    },
    validateChecked() {
      let checkedIds = this.getCheckedIds();
      if (!checkedIds.length) {
        this.$message.warning("请选择一条数据");
        return false;
      }
      return true;
    },
    //封号
    banPlayer(uid) {
      this.banPlayerId = uid;
      this.banPlayerDialogVisible = true;
    },
    closeBanPlayerDiolog() {
      this.banPlayerDialogVisible = false;
    },
    //获取话题列表
    getTopics() {
      this.$get("trend/topics").then((resp) => {
        this.topicOptions = resp.data.topic_list;
      });
    },
  },
};
</script>

<style lang="scss">
.square-content {
  .video-dialog {
    .el-dialog__body {
      background: #000000;
      text-align: center;
    }

    .el-dialog__header {
      background: #000000;
    }

    .el-dialog__headerbtn {
      font-size: 22px;

      .el-dialog__close {
        color: #ffffff;
      }
    }
  }

  .video-cover {
    position: relative;
    width: 338px;
    overflow: hidden;
    cursor: pointer;

    .video-play {
      position: absolute;
      opacity: 1;
      z-index: 20;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;
      width: 50px;
      height: 50px;
      background: url("/static/image/play-button.png") 12px 11px no-repeat;
    }
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  .img-dialog {
    .el-dialog {
      box-shadow: none;
      background: none;

      .el-dialog__body {
        text-align: center;
      }
    }
  }

  .rec-dialog {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 90px;
      height: 90px;
      line-height: 90px;
      text-align: center;
    }

    .avatar {
      width: 90px;
      height: 90px;
      display: block;
    }

    .el-upload--picture-card {
      width: 90px;
      height: 90px;
      line-height: 100px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 90px;
      height: 90px;
    }

    .el-dialog {
      margin-top: 5vh !important;
    }
  }
}
</style><style lang="scss" scoped>
.comment-li {
  margin: 10px 0px;
  cursor: pointer;
  padding: 0px;

  p {
    margin: 0;
  }

  .el-button + .el-button {
    margin-left: 0px;
    margin-top: 8px;
  }
}

.bor:hover {
  border: 1px dashed #c0c0c0;
}

.operator {
  font-size: 12px;
  margin-right: 10px;
}
</style>
